<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="test.css">
  <title>Zepto Selector unit tests</title>
  <script src="../vendor/evidence.js"></script>
  <script src="evidence_runner.js"></script>
  <script src="../src/zepto.js"></script>
  <script src="../src/selector.js"></script>
  <script src="../src/ie.js"></script>
</head>
<body>
  <h1>Zepto Selector unit tests</h1>
  <p id="results">
    Running… see browser console for results
  </p>
  <div id="fixtures">
    <ul id=list><li>one</li><li>two</li></ul>
    <div class=visibility id=vis>look at me!</div>
    <div class=visibility id=invis style="display:none">can't see me</div>
    <ol id=child class=test>
      <li><span>child1</span></li>
      <li><span>child2</span>
        <ul>
          <li><span>child3</span></li>
          <li><span>child4</span></li>
        </ul>
      </li>
    </ol>
  </div><!-- fixtures -->

  <script>
  (function(){
    Evidence('SelectorTest', {
      testFirst: function(t) {
        var li = $('#list li:first')
        t.assertEqual(1, li.size())
        t.assertEqual('one', li.text())
        t.assertEqual('two', $('#list li:eq(1)').text())
      },
      testLast: function(t) {
        var li = $('#list li:last')
        t.assertEqual(1, li.size())
        t.assertEqual('two', li.text())
      },
      testParent: function(t) {
        var list = $('#list li:parent')
        t.assertEqual(1, list.size())
        t.assertEqual('list', list.attr('id'))
      },
      testContains: function(t) {
        t.assertEqual('two', $('#list li:contains("two")').text())
      },
      testVisibility: function(t) {
        t.assertEqual('vis', $('.visibility:visible').attr('id'))
        t.assertEqual('invis', $('.visibility:hidden').attr('id'))
      },
      testIs: function(t) {
        t.assert($('#list').is('ul'))
        t.assert($('#vis').is(':visible'))
        t.refute($('#invis').is(':visible'))
      },
      testChild: function(t) {
        var items = $('#child').find('> li'),
            results = items.map(function(){
              return $(this).find('> span').text()
            }).get()

        t.assertEqual('child1 child2', results.join(' '))
        t.assertEqual('test', $('#child').prop('class'))
      },
      testChildHas: function(t) {
        var items = $('#child').find('> li:has(ul)'),
            results = items.map(function(){
              return $(this).find('> span').text()
            }).get()

        t.assertEqual('child2', results.join(' '))
      },
      testEmptyHref: function(t) {
        var result, el = $('<div><a href="#">one</a><a href="#">two</a></div>')
        result = el.find('a[href=#]')
        t.assertEqual('one two', result.map(function(){ return $(this).text() }).get().join(' '))
      }
    })
  })()
  </script>
</body>
</html>
